<template>
  <div class= "box"></div>
</template>

<script>
export default {
  name: "Bar",
  mounted() {
    // 初始化对象，echarts.init(dom容器)
    let myChart = this.$echarts.init(document.querySelector(".box"));

    let option = {
      // 标题组件
      title:{
        text: "Echarts入门示例"
      },
      // 提示框组件
      tooltip:{},
      // 图例组件，  series里面有了name值就可以删除legend的data
      legend:{
        data:["销量"]
      },
      // 工具箱组件，可以保存图片等功能
      toolbox:{},
      // 直角坐标系
      xAxis:{
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      // 直角坐标系grid中的x轴
      yAxis:{},
      // 系列图标配置，每个系列通过”type“决定自己的图表类型
      // 大白话： 图标数据，指定什么类型的图标，可以多个图表重叠
      series:[{
        name: "销量",
        type: "bar",
        data:[5,20,36,10,10,20]
      }],
      // 调色盘颜色列表,color设置我们线条的颜色 注意后面是个数组
      color:{}
    };
    //把配置项给实例对象
    myChart.setOption(option);
  },

}
</script>

<style scoped>
  .box {
    width: 300px;
    height: 300px;
    /*background-color: pink;*/
  }
</style>
